
//网页加载完毕会调用此函数
window.onload = function main()
{
	//获取页面中id为webgl的canvas元素
	var canvas = document.getElementById("webgl");
	if(!canvas)
	{
		//获取失败的话显示下面语句
		alert("获取canvas失败！");
		return ;
	}
	
	//获取webgl上下文
	var gl = WebGLUtils.setupWebGL(canvas);
	if(!gl)
	{
		//获取失败显示下面语句
		alert("获取webgl上下文失败！");
		return;
	}
	
	//顶点位置数组   （6个点画两个三角形）
	//var vertices=[vec2(-0.5,-0.5),vec2(0.5,-0.5),vec2(-0.5,0.5),
	              //vec2(-0.5,0.5),vec2(0.5,-0.5),vec2(0.5,0.5)];
				  
	//顶点位置数组   （三角条绘制）	
	var vertices =[//C
				   vec2(-0.79,0.81),  //0  2   3
	               vec2(-0.15,0.81),  //1
				   vec2(-0.79,0.91),  //2
				   vec2(-0.28,0.91),   //3
				   
				   vec2(-0.98,0.52),
				   vec2(-0.89,0.52),
				   vec2(-0.79,0.90),  //2
				   vec2(-0.76,0.90),
				   
				   vec2(-0.79,0.12),
				   vec2(-0.76,0.12),
				   vec2(-0.98,0.52),  //2
				   vec2(-0.89,0.52),
				   
				   vec2(-0.79,0.1),  //0  2   3
	               vec2(-0.15,0.1),  //1
				   vec2(-0.79,0.2),  //2
				   vec2(-0.28,0.2),
				   
				   //M
				   vec2(-0.05,0.12),  //0  2   3
	               vec2(0.1,0.12),  //1
				   vec2(0.1,0.91),  //2
				   vec2(0.14,0.91),
				   
				   vec2(0.4,0.12),  //0  2   3
	               vec2(0.45,0.12),  //1
				   vec2(0.1,0.91),  //2
				   vec2(0.15,0.91),
				   
				   vec2(0.65,0.12),  //0  2   3
	               vec2(0.8,0.12),  //1
				   vec2(0.59,0.91),  //2
				   vec2(0.63,0.91),
				   
				   vec2(0.3,0.12),  //0  2   3
	               vec2(0.35,0.12),  //1
				   vec2(0.58,0.91),  //2
				   vec2(0.63,0.91),
				   
				   //G
				   vec2(0.07,-0.15),  //0  2   3
	               vec2(0.75,-0.15),  //1
				   vec2(0.075,-0.05),  //2
				   vec2(0.6,-0.05),
				   
				   vec2(-0.13,-0.48),
				   vec2(-0.0,-0.48),
				   vec2(0.09,-0.06),  //2
				   vec2(0.12,-0.06),
				   
				   vec2(0.09,-0.9),
				   vec2(0.12,-0.9),
				   vec2(-0.13,-0.48),  //2
				   vec2(-0.0,-0.48),
				   
				   vec2(0.07,-0.9),  //0  2   3
	               vec2(0.7,-0.9),  //1
				   vec2(0.075,-0.8),  //2
				   vec2(0.6,-0.8),
				   
				   vec2(0.3,-0.5),  //0  2   3
	               vec2(0.85,-0.5),  //1
				   vec2(0.3,-0.4),  //2
				   vec2(0.85,-0.4),
				   
				   vec2(0.58,-0.94),  //0  2   3
	               vec2(0.69,-0.94),  //1
				   vec2(0.58,-0.5),  //2
				   vec2(0.69,-0.5),
				   //
				   vec2(-0.6,-0.8),  //0  2   3
	               vec2(-0.53,-0.7),  //1
				   vec2(-0.9,-0.45),  //2
				   vec2(-0.7,-0.3),
				   
				   vec2(-0.68,-0.7),  //0  2   3
	               vec2(-0.6,-0.8),  //1
				   vec2(-0.5,-0.3),  //2
				   vec2(-0.3,-0.45)]; 
				   
	//顶点颜色数据数组（利用三角条绘制正方形）
	var colors = [vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  //M
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  //G
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.4),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.4),    //第二个         0   1
				  vec3(0.6,0.4,0.5),    //第三个
				  vec3(0.8,0.5,0.4),
				  
				  vec3(0.8,0.5,0.35),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.35),    //第二个         0   1
				  vec3(0.6,0.4,0.45),    //第三个
				  vec3(0.8,0.5,0.45),
				  
				  vec3(0.8,0.5,0.35),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.35),    //第二个         0   1
				  vec3(0.6,0.4,0.45),    //第三个
				  vec3(0.8,0.5,0.45),
				  
				  vec3(0.8,0.5,0.35),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.35),    //第二个         0   1
				  vec3(0.6,0.4,0.45),    //第三个
				  vec3(0.8,0.5,0.45),
				  //
				  vec3(0.8,0.5,0.35),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.35),    //第二个         0   1
				  vec3(0.6,0.4,0.45),    //第三个
				  vec3(0.8,0.5,0.45),
				  
				  vec3(0.8,0.5,0.35),    //第一个顶点     2   3
				  vec3(0.7,0.4,0.35),    //第二个         0   1
				  vec3(0.6,0.4,0.45),    //第三个
				  vec3(0.8,0.5,0.45)];    //第四个
	
	
	//设置视口
	gl.viewport(0,0,canvas.width,canvas.height);
	
	//设置背景色
	gl.clearColor(0.9,0.7,0.5,1.0);
	
	var program = initShaders(gl,"vertex-shader","fragment-shader");
	gl.useProgram(program);
	
	//var bufferId = gl.createBuffer();
	var verticesBufferId = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, verticesBufferId);
	
	gl.bufferData(gl.ARRAY_BUFFER,flatten(vertices),gl.STATIC_DRAW);
	
	var a_Position = gl.getAttribLocation(program,"a_Position");
	if(a_Position < 0)
	{
		alert("获取attribute变量a_Position失败！");
		return;
	}
	
	gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
	gl.enableVertexAttribArray(a_Position);
	
	var colorsBufferId = gl.createBuffer();  //创建buffer
	gl.bindBuffer(gl.ARRAY_BUFFER, colorsBufferId);
	
	gl.bufferData(gl.ARRAY_BUFFER,flatten(colors),gl.STATIC_DRAW);
	
	var a_Color = gl.getAttribLocation(program,"a_Color");
	if(a_Color < 0)
	{
		alert("获取attribute变量a_Color失败！");
		return;
	}
	
	console.log("a_Color = %d",a_Color);
	
	gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,0,0);
	gl.enableVertexAttribArray(a_Color);
	
	render(gl);   //进行绘制
};

//绘制函数
function render(gl)
{
	gl.clear(gl.COLOR_BUFFER_BIT);  //用背景色擦除窗口内容
	//C
	gl.drawArrays(gl.TRIANGLE_STRIP,0,4);   //使用顶点数组进行绘制
	gl.drawArrays(gl.LINE_LOOP,4,4);   //使用顶点数组进行绘制
	gl.drawArrays(gl.LINE_LOOP,8,4); 
	gl.drawArrays(gl.TRIANGLE_STRIP,12,4);
	//M
	gl.drawArrays(gl.TRIANGLE_STRIP,16,4);
	gl.drawArrays(gl.LINE_LOOP,20,4);
	gl.drawArrays(gl.TRIANGLE_STRIP,24,4);
	gl.drawArrays(gl.LINE_LOOP,28,4);
	//G
	gl.drawArrays(gl.TRIANGLE_STRIP,32,4);
	gl.drawArrays(gl.TRIANGLE_STRIP,36,4);
	gl.drawArrays(gl.TRIANGLE_STRIP,40,4);
	gl.drawArrays(gl.TRIANGLE_STRIP,44,4);
	gl.drawArrays(gl.LINE_LOOP,48,3);
	gl.drawArrays(gl.TRIANGLE_STRIP,52,4);
	//
	gl.drawArrays(gl.TRIANGLE_STRIP,56,4);
	gl.drawArrays(gl.LINE_LOOP,61,3);

}